<template>
  <div class="ebook-reader">
    <div id="read"></div>
    <div class="ebook-reader-mask" @click="onMaskClick" @touchmove="move" @touchend="moveEnd"></div>
  </div>
</template>

<script>
// import { mapGetters, mapActions } from "vuex" // 为了简化调用
import { ebookMixin } from "../../utils/mixin.js";

import Epub from "epubjs";
import {
  getFontSize,
  saveFontSize,
  getFontFamily,
  saveFontFamily,
  getTheme,
  saveTheme,
  getLocation
} from "../../utils/localStorage";
import { addCss, flatten } from "../../utils/book";

export default {
  // computed: {
  //   ...mapGetters(["fileName","menuVisible"])
  // },
  mixins: [ebookMixin], // 使用混入简化代码
  mounted() {
    // 获取url地址里面的参数
    const fileName = this.$route.params.fileName.split("|").join("/");
    // 触发action
    // this.$store.dispatch("setFileName", fileName).then(() => {
    //   // 这里是一个回调 使用箭头函数 这个this指向的是外层的this
    //   this.initEpub();
    // });
    this.setFileName(fileName).then(() => {
      this.initEpub();
    });
  },
  data() {
    return {};
  },
  methods: {
    // ...mapActions(["setMenuVisible"]),
    initTheme() {
      // 主题
      let defaultTheme = getTheme(this.fileName);
      if (!defaultTheme) {
        defaultTheme = this.themeList[0].name; // 设置默认主题
        saveTheme(this.fileName, defaultTheme); // 存储到本地缓存
      }
      this.setDefaultTheme(defaultTheme); // 更新vuex的默认主题

      // 先循环注册主题
      this.themeList.forEach(theme => {
        this.rendition.themes.register(theme.name, theme.style);
      });
      // 再选择默认样式
      this.rendition.themes.select(defaultTheme);
    },
    initFontSize() {
      // 在缓存中设置 默认字体
      let fontSize = getFontSize(this.fileName);
      if (!fontSize) {
        saveFontSize(this.fileName, this.defaultFontSize);
      } else {
        this.rendition.themes.fontSize(fontSize);
        this.setDefaultFontSize(fontSize); // 如果存在字体 那么就要更新默认字体为当前字体
      }
    },
    initFontFamily() {
      // 在缓存中设置 默认字体
      let font = getFontFamily(this.fileName);
      if (!font) {
        saveFontFamily(this.fileName, this.defaultFontFamily);
      } else {
        this.rendition.themes.font(font);
        this.setDefaultFontFamily(font); // 如果存在字体 那么就要更新默认字体为当前字体
      }
    },
    parseBook() {
      // 获取封面图片
      this.book.loaded.cover.then(cover => {
        this.book.archive.createUrl(cover).then(url => {
          this.setCover(url); // 存入vuex
        });
      });
      // 获取书籍的基本信息
      this.book.loaded.metadata.then(metadata => {
        this.setMetadata(metadata);
      });
      // 获取目录
      this.book.loaded.navigation.then(nav => {
        // console.log(nav);
        const navItem = flatten(nav.toc);
        function find(item, level = 0) {
          return !item.parent
            ? level
            : find(
                navItem.filter(parentItem => parentItem.id === item.parent)[0],
                level
              );
        }
        navItem.forEach(item => {
          item.level = find(item);
        });
        // console.log(navItem);
        this.setNavigation(navItem); // 存入vuex中
      });
    },
    initEpub() {
      // 初始化阅读器
      const url =
        `${process.env.VUE_APP_RES_URL}/epub/` + this.fileName + ".epub";
      // 生成Book对象
      this.book = new Epub(url);
      this.setCurrentBook(this.book); // 存储在vuex中 当前的的对象
      // 通过Book.renderTo生成Rendition对象
      this.rendition = this.book.renderTo("read", {
        width: innerWidth,
        height: innerHeight,
        method: "default"
      });

      // 获取本地中的当前书的缓存进度
      const location = getLocation(this.fileName);
      //调用自定义的渲染方法 实现 保存进度的渲染
      this.display(location, () => {
        // 渲染电子书之后 做初始化设置
        this.initTheme();
        // 在缓存中设置 默认字体
        this.initFontSize();
        // 在缓存中设置 默认字体
        this.initFontFamily();
        // 全局主题的设置初始化
        this.initGlobalStyle();
      });
      // 实现手势 翻页
      /*
      // rendition.on 是epub.js 绑定事件的方法
      // 手指开始触摸
      this.rendition.on("touchstart", event => {
        this.touchStartX = event.changedTouches[0].clientX; // 开始触摸位置
        this.touchStartTime = event.timeStamp; // 开始触摸的时间
      });
      // 手指结束触摸
      this.rendition.on("touchend", event => {
        const offsetX = event.changedTouches[0].clientX - this.touchStartX; // 结束的位置 - 开始的位置 = 偏移量
        const time = event.timeStamp - this.touchStartTime; //结束触摸的时间 - 开始触摸的时间 = 触摸的间隔时间
        // console.log(offsetX, time);
        // 这里规定 时间小于500ms 才能出发手势操作 自己定义就好
        if (time < 500 && offsetX > 40) {
          // 上一页
          this.prevPage();
          this.hideTitleAndMenu(); // 翻页后隐藏上下导航
        } else if (time < 500 && offsetX < -40) {
          // 下一页
          this.nextPage();
          this.hideTitleAndMenu(); // 翻页后隐藏上下导航
        } else {
          this.toggleTitleAndMenu();
        }
        // event.preventDefault()
        // event.stopPropagetion()
        return false;
      });
      */
      // 向书中注册额为的东西
      this.rendition.hooks.content.register(contents => {
        contents.addStylesheet(
          `${process.env.VUE_APP_RES_URL}/fonts/cabin.css`
        );
        contents.addStylesheet(
          `${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`
        );
        contents.addStylesheet(
          `${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`
        );
        contents.addStylesheet(
          `${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`
        );
      });

      // 解析电子书
      this.parseBook();

      // 分页
      this.book.ready
        .then(() => {
          return this.book.locations.generate(
            750 * (window.innerWidth / 375) * (getFontSize(this.fileName) / 16)
          );
        })
        .then(locations => {
          // console.log(locations)
          this.setBookAvailable(true); // 分页完成后 设置进度条可拖动
          this.refreshLocation(); // f分页完成后 刷新进度条位置
        });
    },
    prevPage() {
      // 上一页
      if (this.rendition) {
        this.rendition.prev().then(() => {
          this.refreshLocation(); // 刷新进度 并保存到本地
        });
      }
    },
    nextPage() {
      // 下一页
      if (this.rendition) {
        this.rendition.next().then(() => {
          this.refreshLocation(); // 刷新进度 并保存到本地
        });
      }
    },
    toggleTitleAndMenu() {
      // 显示或隐藏标题栏和菜单栏
      // this.$store.dispatch("setMenuVisible", !this.menuVisible); // 使用actions映射，然后混入后 就可以 这么简短的访问这个方法了
      if (this.menuVisible) {
        // 当菜单显示的时候 不现实字号设置等 当点击对应的设置后 才能显示对应的东西
        this.setSettingVisible(-1);
        // 隐藏字体设置窗口
        this.setFontFamilyVisible(false);
      }
      this.setMenuVisible(!this.menuVisible);
    },
    onMaskClick(e) {
      // 实现点击屏幕的位置 实现上一页 下一页 菜单栏
      const offsetX = e.offsetX;
      const width = window.innerWidth;
      if (offsetX > 0 && offsetX < width * 0.3) {
        // 上一页
        this.prevPage();
      } else if (offsetX > 0 && offsetX > width * 0.7) {
        // 下一页
        this.nextPage();
      } else {
        // 呼出菜单栏
        this.toggleTitleAndMenu();
      }
    },
    move(e) {
      let offsetX = 0
      if (this.firstOffsetY) {
        offsetX = e.changedTouches[0].clientY - this.firstOffsetY
        this.setOffsetY(offsetX)
      } else {
        this.firstOffsetY = e.changedTouches[0].clientY
      }
      return false
    },
    moveEnd(e) {
      this.setOffsetY(0)
      this.firstOffsetY = null
    }
  }
};
</script>

<style lang='scss' scoped>
@import "../../assets/styles/global.scss";
.ebook-reader {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .ebook-reader-mask {
    position: absolute;
    top: 0;
    z-index: l50;
    width: 100%;
    height: 100%;
  }
}
</style>
